<template>
          <el-header>
          <div class="logo">
          <img src="@/assets/logo.png" alt="" />
          <span>{{$store.state.token?$store.state.user.username:'游客'}}的个人博客</span>
        </div>

        <div class="nav">
          <span @click="$router.push('/')" >博客首页</span>
          <span>技术博客</span>
          <span>生活日志</span>
          <span>留言</span>
          <span>关于我</span>
          <span>
            <i class="el-icon-zoom-in"></i>
          </span>

          <span @click="$router.push('/login')" v-if="!this.$store.state.token">
            登录
          </span>
          <span @click="$router.push('/admin/users/personal')" v-else
            >作者中心</span
          >
        </div>

      </el-header>
</template>
<script>
export default {
    

}
</script>
<style lang="less" scoped>
    .el-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  box-shadow: 1px 1px 5px 1px #eee;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  
  .logo {
    display: flex;
    align-items: center;
    margin: 0 70px;
    img {
      width: 40px;
      height: 40px;
    }
    span {
      font-size: 15px;
    }
  }
  //   导航区域
  .nav {
    display: flex;
    width: 50%;
    margin-left: 220px;
    justify-content: space-between;
    font-size: 13px;
    span {
      color: rgb(136, 125, 125);
    }
    span:hover {
      cursor: pointer;
      color: rgb(65, 61, 61);
    }
  }
}
</style>